import { useState, useEffect } from 'react';
import { FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';
import { baseAvatarUrl } from '../context/AuthProvider';
import { getNews } from '../api/news';

const Btn = ({ children, style, color, ...rest }) => {
    return (
        <TouchableOpacity {...rest} style={
            {
                justifyContent: 'center',
                alignItems: 'center',
                ...style
            }
        }>
            <Text style={{ color: color ? color : '#fff' }}>{children}</Text>
        </TouchableOpacity>
    )
}

const tagsData = [
    { label: '综合新闻', id: "" },
    { label: '通知公告', id: '2' },
    { label: '媒体聚焦', id: '3' },
    { label: '教学科研', id: '4' },
    { label: '基层动态', id: '5' },
];

const Home = () => {
    const [selectTab, setSelectTab] = useState("");
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    useEffect(() => {
        getNews({ page, size: 20, newsType: selectTab })
            .then(res => {
                setRefreshing(false)
                if (page == 1) {
                    setList(res.data.content)
                } else {
                    setList([...list, ...res.data.content])
                }
            })
    }, [page,selectTab])
    const changeType = (id)=>{
        setPage(1);
        setSelectTab(id)
    }
    const onEnd = () => {
        setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const renderItem = ({ item }) =>(
        <View style={styles.newsItem}>
            <Text 
                ellipsizeMode='tail'
                numberOfLines={1} 
                style={styles.newsTitle}
            >
                {item.newsTitle}
            </Text>
            <View style={{flexDirection: 'row'}}>
                <View style={styles.typeView}>
                    <Text style={styles.type}>{item.type?.newsName}</Text>
                </View>
                <View>
                    <Text>{item.publishDate}</Text>
                </View>
            </View>
        </View>
    )
    return (
        <View style={styles.container}>
            <View style={styles.tabBtn}>
                {
                    tagsData.map(item => (
                        <Btn
                            onPress={()=>changeType(item.id)}
                            key={item.id}
                            style={{
                                width: '18%',
                                height: 30,
                                borderRadius: 5,
                                backgroundColor: selectTab == item.id ? "#f00" : '#aaa'
                            }}
                        >
                            {item.label}
                        </Btn>
                    ))
                }
            </View>
            <FlatList
                ListEmptyComponent={<Text>暂无数据</Text>}
                onRefresh={onRefresh}
                refreshing={refreshing}
                data={list}
                renderItem={renderItem}
                onEndReached={onEnd}
                keyExtractor={item => item.id}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 15
    },
    tabBtn: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginVertical: 20
    },
    newsItem: {
        paddingVertical: 10,
        borderBottomColor: '#ccc',
        borderBottomWidth: 1
    },
    newsTitle: {
        fontSize: 16,
        marginBottom: 8
    },
    typeView: {
        marginRight: 20,
        paddingHorizontal: 5,
        backgroundColor: '#f00',
        borderRadius: 3
    },
    type: {
        color: '#fff',
    }

});

export default Home; 